<template>
	<view class="store_info">
		<view class="info_box">
			<u-image width="112" height="112" :src="value.logoUrl"></u-image>
			<view class="info_msg">
				<view
					class="store_name"
					@click="
						navSwitch(
							'/pages/index/storeLicence/index?domainPrefix=' +
								domainPrefix
						)
					"
				>
					<view class="name u-line-1">{{ value.storeName }}</view>
					<u-icon name="arrow-right" color="#222" size="25"></u-icon>
				</view>
				<view class="store_msg">
					<image
						v-if="value.isAuthentication === 1"
						class="label_img"
						src="@/static/iconImg/certified.png"
					></image>
					<text style="color: #999">
						{{ $t('locales.varieties') }}：{{ value.goodsNumber }}
					</text>
				</view>
			</view>
			<view
				v-if="!home"
				class="collection"
				@click="setCollectionStore(storeInfo.isCollectionStore)"
			>
				<image
					class="collection_icon"
					src="http://img.druglots.cn/image/xin.png"
					v-if="storeInfo.isCollectionStore === 1"
				></image>
				<image
					class="collection_icon"
					src="http://img.druglots.cn/image/nullxin.png"
					v-else
				></image>
				<view class="text">
					{{
						storeInfo.isCollectionStore === 1
							? $t('locales.collected')
							: $t('locales.collection')
					}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { collectionStore, cancelCollectionStore } from '@/api/http/store'
export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		},
		domainPrefix: {
			type: String,
			default: ''
		},
		home: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			storeInfo: {
				
			}
		}
	},
	watch: {
		value(val) {
			this.storeInfo = val
		}
	},
	methods: {
		navSwitch(url) {
			uni.navigateTo({
				url
			})
		},
		setCollectionStore(type) {
			if (type === 0) {
				collectionStore({
					storeId: this.value.storeId
				}).then(res => {
					if (res.code === 200) {
						this.storeInfo.isCollectionStore = 1
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
			if (type === 1) {
				cancelCollectionStore({
					storeIdList: [this.storeInfo.storeId]
				}).then(res => {
					if (res.code === 200) {
						this.storeInfo.isCollectionStore = 0
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.store_info {
	width: 100%;
	background-color: #fff;
	border-bottom: 0.5px solid #eee;
	box-shadow: 0px 4px 6px 0px #e3e3e3;
	.info_box {
		min-height: 142rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #222;
		.info_msg {
			flex: 1;
			margin: 0 20rpx;
			.store_name {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;
				.name {
					width: 400rpx;
					font-weight: bold;
					color: #222222;
					font-size: 32rpx;
				}
			}
			.store_msg {
				font-size: 26rpx;
				color: #333333;
				display: flex;
				align-items: center;
				height: 40rpx;
				.label_img {
					width: 78rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}
		}
		.collection {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 90rpx;
			height: 79rpx;
			.collection_icon {
				width: 30rpx;
				height: 30rpx;
			}
			.text {
				font-size: 22rpx;
			}
		}
	}
}
</style>
